<template>
  <van-nav-bar title="心率" left-text="返回" left-arrow @click-left="onClickLeft" />
  <div class="ab">
    <div class="ag">
      <div class="l">
        <h1>{{ newdata }}</h1>
        <p>心率(次/分)</p>
      </div>
      <div class="r">
        <h1>--</h1>
        <p>静息心率(次/分)</p>
      </div>
    </div>
    <div class="ae">
      <!--根据心率具体情况反馈-->
      <div v-if="newdata < 60">
        <p>您心率有点慢</p>
        心跳缓慢如果没有心慌胸闷气短等症状,这并不是一种疾病,很可能是心功能比较好的表现,
        但如果心脏有不舒服,建议及时去医院就诊,查找原因,及时治疗。
        <p>*以上建议仅供参考,如有不适请及时就医</p>
      </div>
      <div v-else-if="newdata >= 60 && newdata <= 75">
        <p>您心率正常,状态不错</p>
        静息心率每分钟60~75次是理想状态,建议保持正常体重,平时多运动,提高心肺功能，
        <p>*以上建议仅供参考,如有不适请及时就医</p>
      </div>
      <div v-else>
        <p>您心跳过快,需查找原因</p>
        请注意监测静息状态下的心率,一旦多次出现类似表现,请尽快就医,查找背后的诱因或者原发疾
        病,尽早治疗。
        <p>*以上建议仅供参考,如有不适请及时就医</p>
      </div>
    </div>
  </div>
  <div class="af">
    <h4>近7天记录</h4>
    <div ref="main" style="width: 100%; height: 200px"></div>
    <!--Ecarts图-->
    <button
      style="
        width: 100%;
        background: greenyellow;
        color: antiquewhite;
        border: none;
        height: 60px;
        text-align: center;
        margin-top: 40px;
      "
    >
      手动录入
    </button>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
const router = useRouter()
// 图表容器DOM元素。
const main = ref<HTMLDivElement>()
// 模拟心率数据
const newdata = ref(60)
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例。
  const myChart = echarts.init(main.value)
  // 指定图表的配置项和数据
  const option = {
    grid: {
      // 控制图表的内外间距。
      left: '3%',
      right: '4%',
      bottom: '3%',
      // 是否包含标签在内的自动布局。默认为 true，也就是包含标签在内的自动布局。
      containLabel: true
    },
    // X 轴配置，默认为类目轴类型。
    xAxis: {
      // X 轴类型。
      type: 'category',
      // X 轴两端是否留白。默认为 true，也就是两边不留白。
      boundaryGap: false,
      // X 轴数据。
      data: ['12-21']
    },
    // Y 轴配置，默认为数值轴类型。
    yAxis: {
      // Y 轴类型。
      type: 'value'
    },
    // 提示框组件。
    tooltip: {
      // 触发类型：'axis'
      trigger: 'axis'
    },
    // 声明多个 Series 在同一个坐标系中
    series: [
      {
        // 系列中的 'name' 用于提示框的标题。
        name: '最高心率60 最低心率60',
        // 系列类型。
        type: 'line',
        // 系列中的 'stack' 用于定义堆叠名称。在同一坐标系中，具有相同 stack 值
        stack: 'Total',
        // 系列中的 'data' 用于提供数据。
        data: [newdata.value]
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
})
const onClickLeft = () => {
  router.go(-1)
}
</script>
<style>
template {
  background: whitesmoke !important;
}
.ab {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 260px;
  padding: 10px;
  text-align: center;
  background: white;
  margin-top: 10px;
  .ae {
    width: 100%;
    height: 180px;
    background: whitesmoke !important;
    margin-top: 20px;
    text-align: left;
    line-height: 40px;
  }
}
.af {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 500px;
  padding: 10px;
  text-align: center;
  background: white;
  margin-top: 10px;
}
.ag {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .l {
    width: 50%;
    height: 100%;
    text-align: center;
    float: left;
  }
  .r {
    width: 50%;
    height: 100%;
    text-align: center;
    float: right;
  }
}
</style>
